<html lang="en">

<head th:include="templates/common :: header" />

<body>
	<div class="container" style="margin-top: 40px;">
		<div th:include="templates/common :: menu" ></div>	
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'teachers.not.found'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
			
 		<div class="panel panel-primary" >		
	 		<div class="panel-body">				
				<div style="text-align:center;">
					<p style="display:inline-block;" th:text="#{teachers.show.subjects.list(${user.firstName + ' ' + user.lastName })}"></p> 
				</div>
				
			</div>
		</div>
		
		<table class="table table-bordered table-striped table-condensed">
			<thead>
				<tr>
					<th scope="col" style="text-align: center !important;" th:text="#{subjects.table.subject.name}"/>
					<th scope="col" style="text-align: center !important;" th:text="#{groups.label}"/>					
				</tr>
			</thead>
			<tbody>
				<tr th:each="subject : ${user.subjects}">
					<td th:text="${subject.subjectName}" style="text-align: center; vertical-align: middle;"></td>		
					<td style="text-align: center; vertical-align: middle;">
						<select id="groups" multiple="multiple" class="chzn-select btn-block">
							<option selected="selected" th:each="group : *{subject.groups}" th:value="${group.id}" th:text="${group.getGroupFullName()}" />
						</select>
					</td>	
				</tr>
			</tbody>
		</table>
	</div>		
	<script type="text/javascript"> 
		$(document).ready(function() {
	    	$('.chzn-select').select2({});
	    	$('.chzn-select').prop('disabled', true);
	    });
	</script>	
</body>
</html>